﻿<!DOCTYPE html>
<html>
<head>
    <title>CGI</title>
</head>
<body>
    <h1>Our Page</h1>
    <script>
        //01

        //innerWidth  = size of the page viewport (the inner height of the browser window)
        //innerWidth = the inner width of the browser window
        //innerWidth = the Html document is actually showing
        //browser use somekind of frame and that's includes in outerWidth
        console.log(window.innerWidth + ',' + window.outerWidth);
        //A practical JavaScript solution (covering all browsers):
        console.log(window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth);
        console.log(window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight);


        //02
        /*
        //window.open('http://www.cgi.com', '_blank');

        window.open("http://www.cgi.com", "_blank", "toolbar=yes, scrollbars=yes, resizable=yes, top=500, left=500, width=400, height=400");
        */

        //03
        /*
        //setTimeout is the browser function, which we will called through global object window
        //don't need to prefix window.setTimeout, global function
        //setTimeout sets number of second delay to execute the function
        console.log(new Date().getSeconds());
        setTimeout(function () {
            console.log(new Date().getSeconds());
        }, 1000);
        */

        //04
        /*
        //here we clear out second time
        console.log(new Date().getSeconds());
        var id = setTimeout(function () {
            console.log(new Date().getSeconds());
        }, 1000);
        clearTimeout(id);
        */

        //05
        /*
        console.log(new Date().getSeconds());
        var id = setInterval(function () {
            var secs = new Date().getSeconds();
            console.log(secs);
            if (secs === 10)
                clearInterval(id);
        }, 1000);
        */
    </script>
</body>
</html>